{% extends 'base.html' %}

{% block container %}
<div class="top-pad">
    <form method="POST" id="queryFrom">
        <input type="text" class="form-control" placeholder="输入产品ID" name="querySpuId" required id="querySpuId" value="1541262637556776960"><br>
        <input type="text" class="form-control" placeholder="输入代理人手机号" name="phoneNum" required id="phoneNum" value="" maxlength="11"><br>
        <select class="selected form-control" name="select" id="QuerySelectEnv">
            {% for config in configs %}
            <option value="{{ config.id }}">{{ config.env }}</option>
            {% endfor %}
        </select><br>
        <textarea id="AgreementPath" rows="2" cols="151" readonly placeholder="查询产品在当前商户是否上架"></textarea>
    </form>
    <input type="button" value="查询" class="form-control" id="spuQuery" style="color: #edf4f6; background-color: #397094" ><br>
    <div id="QueryLoading"></div>
{#    设置span元素内容垂直居中#}
    <div style="align-items: center; display: flex">
        <span style="color: red">计划名称</span><textarea id="skusId" rows="4" cols="60"></textarea>&nbsp;
        <span style="color: #159ab4">责任名称</span><textarea id="dutysId" rows="4" cols="160"></textarea>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("#spuQuery").click(function (){
            let sup_id = $("#querySpuId").val(); // 产品id
            let env_name = $("#QuerySelectEnv option:selected").text(); // 环境名称
            let env_id = $("#QuerySelectEnv option:selected").val(); // 环境id
            let phone_num = $("#phoneNum").val(); // 手机号
            if (sup_id === "" || phone_num === ""){
                alert("产品ID/手机号必填")
            }else {
                $.ajax({
                    url: "{{ url_for("record_policy.query_sup_info") }}",
                    type: "post",
                    dataType: "json",
                    data: {sup_id:sup_id, env_name:env_name, env_id:env_id, phone_num:phone_num},
                    beforeSend:function (){
                        $("#QueryLoading").html(
                            "<img src='../../static/loading/loading-3.gif' width='40'>" +
                            "<span>查询中...</span>"
                        ); //在请求后台数据之前显示loading图标
                    },
                    success: function (data){
                        $("#QueryLoading").empty(); //ajax返回成功，清除loading图标
                        if (data.status !== 200){
                            alert(data.data)
                        }else {
                            console.log(data)
                            $("#skusId").val(data.data.sku)
                            $("#dutysId").val(data.data.duty)
                            $("#AgreementPath").val(data.data.agreement)
                            $("#agencyId").val(data.data.agency_id)
                            $("#companyId").val(data.data.company_id)
                        }
                    },
                    error:function (){
                        $("#QueryLoading").empty();
                        alert("出现异常了，请查看日志信息~")
                    }
                })
            }
        })
    </script>

    <form id="form" role="form" method="post" class="formBuilder">
        <h5 style="color: #0959eb">机构ID、代理人ID、承保日期 为空则使用默认值</h5>
        <input type="text" placeholder="机构ID" id="companyId" style="display: inline-block">
        <input type="text" placeholder="代理人ID" id="agencyId" style="display: inline-block">
        <input type="text" placeholder="承保日期格式:2022-09-10" id="acceptedTime" style="display: inline-block">
        <input type="file" name="file" id="file" value="请上传Excel文件" required style="display: inline-block;padding: 0px 2px;color: #b1412b"><br>
        <br><input type="button" id="execute" value="执行" style="color: #edf4f6; background-color: #397094" class="form-control">
        <h4 style="color: green">录单结果(执行后展示)</h4>
        <div id="executeLoading"></div>
        <div id="executeInfo"></div>
	</form>
    <script type="text/javascript">
        $("#execute").click(function (){
            let env_name = $("#QuerySelectEnv option:selected").text(); // 环境名称
            let file_input = $("#file")[0].files[0]; // 获取文件对象
            let company_id = $("#companyId").val();
            let agency_id = $("#agencyId").val();
            let accepted_time = $("#acceptedTime").val();
            let env_id = $("#QuerySelectEnv option:selected").val(); // 环境id
            let form_data = new FormData();
            form_data.append("file_input", file_input);
            form_data.append("env_name", env_name);
            form_data.append("company_id", company_id);
            form_data.append("agency_id", agency_id);
            form_data.append("accepted_time", accepted_time);
            form_data.append("env_id", env_id);
            if (typeof (file_input) == "undefined"){
                alert("请上传Excel文件~")
            } else {
                $.ajax({
                    url: "{{ url_for('record_policy.execute') }}",
                    type: "post",
                    // async为true时，点击按钮后，会先alert(‘after click’)，之后请求完毕才会alert(‘success’)
                    // async为false时，点击按钮后，则会造成阻塞，阻止下面的代码执行，只有执行完ajax请求，才会去执行后面的代码
                    //async: false,
                    data: form_data,
                    processData: false,
                    contentType: false,
                    beforeSend:function (){
                        $("#executeLoading").html(
                            "<img src='../../static/loading/loading-4.gif' width='40'>" +
                            "<span>添加中...</span>"
                        );
                    },
                    success: function (data){
                        $("#executeLoading").empty();
                        let str = ''
                        if (data.status !== 200){
                            alert(data.message + '\n' + data.data)
                        } else {
                            $.each(data.data, function (i, obj) {
                                i += 1
                                str += '<p>'+i+'个：'+obj+'</p>'
                            })
                            $("#executeInfo").append(str)
                        }
                    },
                    error:function (){
                        $("#executeLoading").empty();
                        alert("出现异常了，请查看日志信息~")
                    }
                    })
                }
        })
    </script>
</div>
{% endblock %}